<template>
  <div class="agent">
    <el-card slot="header" class="box-card">
      <el-row type="flex" justify="space-between" align="middle">
        <el-col>
          <div class="before">
            <!-- 定义前面得插槽 -->
            <el-button type="primary" size="mini" @click="isShowDialog = true">添加经纪</el-button>
          </div>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <!-- 定义后面的插槽 -->
            <el-input v-model="searchData.name_contains" placeholder="请输入内容">
              <el-button slot="append" @click="screen"><i class="el-icon-search" /></el-button>
            </el-input>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <!-- 表格组件 -->
    <el-card>
      <template>
        <el-table border :data="agentList" style="width: 100%">
          <el-table-column prop="image" label="图片">
            <!-- 组件匿名插槽默认名称 default -->
            <template #default="{row}">
              <img
                v-fiximg="require('@/assets/pic.jpg')"
                :src="row.image"
                alt=""
                style="width: 160px; height: 120px; border-radius: 5px;"
              >
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="address" label="地址" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column label="操作">
            <!-- 组件匿名插槽默认名称 default -->
            <template #default="{row}">
              <el-button size="small" type="primary" @click="editAgent(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delAgent(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <div class="block">
          <el-pagination
            layout="prev, pager, next, total"
            :total="total"
            :current-page="currentPage"
            :page-size="searchData._limit"
            @current-change="currentChange"
          />
        </div>
      </el-row>
    </el-card>
    <!-- 添加经纪人组件 -->
    <!-- getAgentsApi, 子传父,父接收触发 此函数 -->
    <addAgent
      ref="addAgent"
      :is-show-dialog.sync="isShowDialog"
      @addAgent="getAgentsApi"
    />
  </div>
</template>

<script>
import { getagentsApi, agentsCount, delAgentsId, getAgentsId } from '@/api/agent'
import addAgent from './addAgent.vue'
export default {
  components: {
    addAgent
  },
  data() {
    return {
      searchData: { // 模糊搜索
        _limit: 2, // 一页两条数据
        _start: 0, // 从第一条开始显示
        name_contains: '' // 模糊筛选参数
      },

      // 分页
      currentPage: 1, // 当前页码
      total: 0, // 总页码
      agentList: [], // 经纪人数据

      isShowDialog: false // 弹框组件显示也隐藏
    }
  },
  async created() {
    // 页面渲染
    this.getAgentsApi()
  },
  methods: {

    // 编辑回显数据
    async editAgent(id) {
      // 根据id获取经纪数据
      const { data } = await getAgentsId(id)
      // 进行数据回显
      this.$refs.addAgent.formData = data
      // 回显数据成功后显示编辑弹框
      this.isShowDialog = true
      // 页面更新后再获取数据
      this.$nextTick(() => {
        // 封面图片回显
        this.$refs.addAgent.$refs.fileList.fileList = [{ url: data.image }]
      })
    },

    // 删除
    async delAgent(id) {
      // 二次询问是否删除
      await this.$confirm('是否确定删除客户')
      // 发起请求删除服务器数据
      await delAgentsId(id)
      // 提示用户
      this.$message.success('删除成功')
      // 如果本来剩下一条数据, 删除成功获取新数据前,将页码减一
      if (this.agentList.length === 1 && this.currentPage > 1) {
        // 将页码减一
        this.currentPage--
        // 修改页码改变后跟随显示的数据(第几条,根据下标显示)
        this.searchData._start = this.currentPage * this.searchData._limit - 2
      }
      // 刷新页面
      this.getAgentsApi()
    },

    // 搜索
    async screen() {
      if (this.searchData.name_contains) {
        // 重置当前页码
        this.currentPage = 1
        this.searchData._start = 0
        // 刷新页面
        this.getAgentsApi()
      } else {
        // 无关键字点击搜索提示
        this.$message.error('请输入搜索关键字')
      }
    },

    // 分页翻页
    async currentChange(newPage) {
      // 点击页码获取最新页码
      this.currentPage = newPage
      // 修改显示的数据(第几条,根据下标显示)
      this.searchData._start = newPage * this.searchData._limit - 2
      // 更新页面
      const { data } = await getagentsApi(this.searchData)
      this.agentList = data
    },

    // 获取经纪人数据列表 和 // 获取全部数据数量 封装函数
    async getAgentsApi() {
      const { data } = await getagentsApi(this.searchData)
      this.agentList = data
      // 获取全部数据数量
      const res = await agentsCount(this.searchData)
      this.total = res.data
    }
  }
}
</script>

<style  scoped>
.agent{
    margin: 20px;
}
</style>

